import Article from '../../type'
import { useHistory } from 'react-router-dom'
import Head from '../../compontent/Header'
import React, { useEffect } from 'react'
import style from './style.module.less'
import { EyeOutlined, LeftOutlined } from '@ant-design/icons'
import { TweenOneGroup } from 'rc-tween-one'
import { Tag } from 'antd'
import { Link } from 'react-router-dom'
import { Viewer } from '@bytemd/react'
import gfm from '@bytemd/plugin-gfm'
import math from '@bytemd/plugin-math'
import highlight from '@bytemd/plugin-highlight-ssr'
import mermaid from '@bytemd/plugin-mermaid'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import * as api from '../../services/api'

export default function ArticleDetails(props: any) {
  const history = useHistory()

  let token: string = props.match.params.id
  // @ts-ignore
  let data: Article = history.location.state.data
  // @ts-ignore
  let url: string = history.location.state.url
  // @ts-ignore
  let back: boolean = history.location.state.back

  let tagChile = data.tags.split(',').map((tag) => (
    <Tag key={tag} color={'gold'}>
      {tag}
    </Tag>
  ))

  useEffect(() => {
    getPreview()
  }, [])

  async function getPreview() {
    try {
      if (!back) {
        let res = await api.getArticle(token, data.id)
        if (res.data.stat === 'ok') {
        }
      }
    } catch (e) {
      throw e
    }
  }

  const plugins = [gfm(), math(), highlight(), mermaid(), mediumZoom()]

  function getTime(str: number) {
    const date = new Date(str)
    let month: string | number = date.getMonth() + 1
    let strDate: string | number = date.getDate()
    let hour: string | number = date.getHours()
    let min: string | number = date.getMinutes()

    if (month <= 9) month = '0' + month
    if (strDate <= 9) strDate = '0' + strDate
    if (hour <= 9) hour = '0' + hour
    if (min <= 9) min = '0' + min

    return `${date.getFullYear()}年${month}月${strDate}日${hour}时${min}分`
  }

  return (
    <>
      <Head>
        <title />
      </Head>
      <div className={style.main}>
        {back ? (
          <Link to={`/personal/${token}`} className={style.back}>
            <LeftOutlined /> 返回
          </Link>
        ) : (
          <Link to={`/main/${token}`} className={style.back}>
            <LeftOutlined /> 返回
          </Link>
        )}
        <div className={style.Article}>
          <h1 className={style.ArticleTitle}>{data.title}</h1>
          <div className={style.ArticleMain}>
            <span className={style.ArticleAuthor}>
              作者：{data.author}&nbsp;&nbsp;
            </span>
            <span className={style.ArticleCTime}>
              &nbsp;&nbsp;创建时间：{getTime(data.ctime)}
              &nbsp;&nbsp;&nbsp;&nbsp;
            </span>
            <EyeOutlined />
            <span className={style.ArticlePreview}>&nbsp;{data.preview}</span>
          </div>
        </div>
        <div className={style.ArticleTags}>
          <TweenOneGroup
            enter={{
              scale: 0.8,
              opacity: 0,
              type: 'from',
              duration: 100,
            }}
            leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
            appear={false}>
            {tagChile}
          </TweenOneGroup>
        </div>
        {!!data.banner[0]?<img className={style.img} alt={'error'} src={`${url}`} />:<></>}
        <div className={style.ArticleContent}>
          <Viewer plugins={plugins} value={data.content} />
        </div>
      </div>
    </>
  )
}
